@extends('layouts.back_stage')
@section('content') 
  <style>
  #app{padding:20px}
  [v-cloak] {display: none;}
  .type_x{margin:20px 0 0 20px;}
  .ingred_sel{width:300px;margin:0 10px 0 10px}
  .input_add{width:300px;margin-left:10px;}
  .add_s{margin:20px 0 0 20px}
  .back{background:#fff;margin:10px 10px  30px 10px;padding:10px}
  .addsert{font-weight:500;margin:20px 0 10px 30px}
  .caser{width:300px;}
  .el-input__inner::placeholder{color:#676a6c}
  .tab_show{margin:30px 0 20px 20px}
  .bank_account{width:350px}
  .el-input__inner{width:300px}
  ::-webkit-scrollbar {height: 8px;}
  </style>
  <div class="container">
      <div style="padding:20px 20px 0px 0;overflow:hidden;"><h3 style="float:left;">修改加工厂</h3></div>
      <div class="page-body" id="app" v-cloak>
      <el-form  ref="ruleForm" v-model="ruleForm"   class="demo-ruleForm">
         <div class="header"><h3>客户基本信息</h3></div>
         <div class="back">
          <div class="type_x">
            <label>客户名称：</label>
                <el-input  class="ingred_sel" v-model="ruleForm.name" maxlength="10" size="small" placeholder="请输入名称"></el-input>
            </div>
            <div class="add_s">   
            <label>手机号码：</label>
              <el-input  class="ingred_sel" v-model="ruleForm.tel"  maxlength="11" size="small" placeholder="请输入1开头的11位数"></el-input>
          </div>
          <div class="add_s">
            <label>省市区：&nbsp; &nbsp;&nbsp;&nbsp;</label>
            <el-cascader
                :options="options"
                class='caser'
                size="small"
                :placeholder="pleader"
                change-on-select
                v-model="ruleForm.area"
                @focus="handleChange">
              </el-cascader>
            </div>
            <div class="addsert">
            <span>
            <label>地址： &nbsp;&nbsp;</label>
                <el-input  class="input_add on" maxlength="30"  v-model="ruleForm.address" size="small" placeholder="请输入:详细地址"></el-input>
            </span>  
            </div>
        </div>
        <div class="header"><h3>其他信息</h3></div>
        <div class="back">
            <div class="type_x">
               
                  <label>银行账号：&nbsp;</label>
                  <el-input   class="bank_account" v-model="ruleForm.bank_account" size="small" placeholder="请输入: 16至19位数字"></el-input>
              </div>
              <div class="tab_show">
            <label>合同时间:&nbsp;&nbsp;&nbsp;</label>
                  <!--     <el-date-picker
                     v-model="ruleForm.start"
                      type="datetime"
                      size="small"
                      value-format="yyyy-MM-dd hh:mm:ss"
                      placeholder="选择日期时间">
                    </el-date-picker>
               </div>
               <div class="tab_show">
                    <label>结束时间:&nbsp;&nbsp;&nbsp;</label>
                    <el-date-picker
                      v-model="ruleForm.end"
                      type="datetime"
                      size="small"
                      value-format="yyyy-MM-dd hh:mm:ss"
                      placeholder="选择日期时间"
                     >
                    </el-date-picker>
                    
               </div> -->
               <el-date-picker
               size="small"
                v-model="ruleForm.starta"
                type="datetimerange"
                value-format="yyyy-MM-dd  hh:mm:ss"
                :start-placeholder="ruleForm.start"
                :end-placeholder="ruleForm.end"
                :default-time="['12:00:00']">
                </el-date-picker>
        </div>
        <el-form-item>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   <el-button type="primary" class="rest" @click="formSubmit" size="small">立即修改</el-button>
                   <el-button  size="small"  type="primary" @click="resetForm" >重置</el-button>
        </el-form-item>
       </el-form>
      </div>
  </div>
 <script>
   new Vue({
        el: '#app',
        data() {     
         return {  
          options: [],
         // value6: '',
         aelect_type:'',
         updateId:'',
         areaaa:'',
         clearable:false,
         aa:false,
         pleader:'',
          ruleForm:{
           // type:'',
            pid:'',
            name:'',
            tel:'',
            address:'',
            area:[],
            starta:'',
            area_bh:'',//装省市区最后一个id
            bank_account:'',//银行账号
            start:'',//开始时间 
            end:''//结束时间 
          },
           options: [],
       
            };
          },
       methods: {
        typeValue(val){
             // console.log(11111,val)
              this.ruleForm.type=val
            },
        handleChange(value) {
        //console.log(111,value);
        const that=this;
            $.ajax({
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
              type:'get',
              url:'/clients/address'
            }).then(function(response){
               let data=response
               const options = [];
               for (let item in data) {

                let province = {
                        value: data[item].value,
                        label: data[item].label,
                        children: []
                    };
                    for (let city in data[item].children) {
                      let counties=[];
                      for (let county in data[item].children[city].children) {
                            let cityno=data[item].children[city].children[county];
                            counties.push({value:cityno.value,label:cityno.label});
                        }
                        province.children.push({
                            value: data[item].children[city].value,
                            label: data[item].children[city].label,
                            children:counties
                        });
                    }
                        options.push(province)
                  }
                  that.$data.options=options;
               })
             },
             //重置重置
             resetForm(){
                this.pleader=''
                this.ruleForm='',
                this.$notify({
                title: '成功',
                message: '重置清空成功',
                type: 'success'
              });

             },
             formSubmit(){
                 let that=this
                if(this.ruleForm.name==''){
                    this.$notify.error({
                        title: '提示',
                        message: "请输入名称",
                    });
                    return false;
                }  
                if(this.ruleForm.tel==''){
                    this.$notify.error({
                        title: '提示',
                        message: "请输入手机号码",
                    });
                    return false;
                } 
                var moder=/^1\d{10}$/ 
                if(!moder.test(this.ruleForm.tel)){
                  this.$message({
                      message: '手机号码格式有问题 请输入以1开头的11位数',
                      type: 'warning'
                    });
                    return false;
                }

                if(this.ruleForm.address==''){
                    this.$notify.error({
                        title: '提示',
                        message: "请输入详细地址",
                    });
                    return false;
                }  
              
                if(this.ruleForm.bank_account!=''){
                        var number=/^(\d{16}|\d{19})$/ 
                    if(!number.test(this.ruleForm.bank_account)){
                    this.$message({
                        message: '账号位数不对 请输入16位 或 19位的账号',
                        type: 'warning'
                        });
                        return false;
                    }
                }
               
              if(that.ruleForm.starta!='' || that.ruleForm.starta!=null){
                for(var  i  in that.ruleForm.starta){
                     that.ruleForm.start=that.ruleForm.starta[i].split(',')[0],
                     that.ruleForm.end=that.ruleForm.starta[i].split(',')[1]
                }
               
              }
              if(that.ruleForm.area!=''){
                that.ruleForm.area_bh=that.ruleForm.area[that.ruleForm.area.length-1]
              }
              $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type:"post",
                    url:`/supplier/update/${this.updateId}`,
                      data:this.ruleForm,
                    success: function (res) {
                      if(res.result.success==true){
                        that.$notify({
                                title: '成功',
                                message: '修改成功',
                                type: 'success'
                            });
                      window.location.href = '/supplier/showpage';
                      }else{
                        that.$notify.error({
                                title: '提示',
                                message: res.result.errorMsg,
                            });
                        }
                    } 
                  });  
                
             },
             respoert(){
             let that=this
                $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type:'get',
                    url:`/supplier/show/${this.updateId}`
                    }).then(function(res){
                         that.ruleForm.name=res.name,
                         that.ruleForm.tel=res.tel,
                         that.ruleForm.address=res.address,
                         that.ruleForm.bank_account=res.bank_account,
                         that.ruleForm.start=res.start,
                         that.ruleForm.end=res.end
                         that.pleader=res.province+'/'+res.city+'/'+res.district,
                         that.ruleForm.area_bh=res.area_bh
                    })
              },
        },
        mounted() {
             this.updateId=window.location.href.split('/update/')[1]
             this.respoert();
             this.handleChange();
        },
   });   
 
 </script>

@endsection